<template>
  <div id="recipe-article">
      <nav-bar :title="title" />
      <div class="content" v-html="recipeObj.content"></div>
  </div>
</template>

<script>
import NavBar from '../components/NavBar'
export default {
  name: 'recipeArticle',
  components: {
    'nav-bar': NavBar
  },
  data () {
    return {
      title: '食谱详情',
      // 食谱对象
      recipeObj: null
    }
  },
  methods: {
    /**
     * 业务： 根据食谱id 获取食谱对象的信息
     */
    getArticleById (recipeId) {
      this.$http.get(`/menus/query?id=${recipeId}`)
        .then(({ data: res }) => {
          const { meta, data } = res
          if (meta.code !== 200) {
            return this.notify(meta.msg)
          }
          this.recipeObj = data
        })
        .catch(error => {
          this.$notify(error)
        })
    }
  },
  created () {
    const recipeId = this.$route.params.recipe_id
    // 获取对应的食谱数据
    this.getArticleById(recipeId)
  }
}
</script>

<style lang="less">
#recipe-article{
  width:100%;
  box-sizing: border-box;
  .content{
    width:96%;
    margin:auto;
    box-sizing: border-box;
  }
}
</style>
